<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/layui.css" media="all">
    <script src="layui.js" charset="utf-8"></script>
    <script src="js/echarts.js"></script>
    <script src="../front/component/js/head.js"></script>
    <!--  axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../front/assets/js/vue.js"></script>

    <script src="js/backHead.js"></script>
    <script>
        window.onload = function () {
            axios.get(PATH+"/category/getAll")
                .then((resp)=> {
                    categorys = resp.data.data
                    localStorage.setItem("categorys",categorys)
                    console.log(categorys[1])
                })
        }
    </script>
</head>

<body>
<!--    <table class="layui-hide" id="test"></table>-->
<div id="app">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>商品概览</legend>
    </fieldset>
    <div id="main1" style="height:500px;width: 500px"></div>
    <div id="main2" style="height:500px;width:100%"></div>
</div>




<script>


    const app = new Vue({
        el: "#app",
        data: {
            pieVo:[],
            names:[]
        },
        methods:{
            get() {
                // let that = this;
                // 获取笑话
            },
        },
        mounted(){
            let that = this;
            axios.get(PATH+"/furniture/getAdminPie")
                .then((resp)=> {
                    resp = resp.data
                    this.pieVo = resp.pieVos
                    this.names = resp.names
                    console.log(resp)

                    //折线图
                    var myChart = echarts.init(document.getElementById('main1'));

                    var option1 = {
                        color:['#a7c5eb','#a3ddcb','#e8e9a1','#e6b566','#e5707e','#cd5d7d','#949cdf'],
                        title: {
                            text: '商品类别总数一览',
                            left: 'center'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: this.names
                        },
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: resp.pieVos,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    myChart.setOption(option1);

                })


            axios.get(PATH+"/order/getBar")
                .then((resp)=> {
                    resp = resp.data
                    // this.pieVo =
                    // this.names =
                    console.log(resp)

                    //折线图
                    var myChart = echarts.init(document.getElementById('main2'));

                    option2 = {
                        color: ['#3398DB'],
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: resp.days,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '直接访问',
                                type: 'bar',
                                barWidth: '60%',
                                data: resp.price
                            }
                        ]
                    };


                    // option2 = {
                    //     xAxis: {
                    //         type: 'category',
                    //         boundaryGap: false,
                    //         data: resp.days
                    //     },
                    //     yAxis: {
                    //         type: 'value',
                    //         boundaryGap: [0, '30%']
                    //     },
                    //     visualMap: {
                    //         type: 'piecewise',
                    //         show: false,
                    //         dimension: 0,
                    //         seriesIndex: 0,
                    //
                    //     },
                    //     series: [
                    //         {
                    //             type: 'bar',
                    //             smooth: 0.6,
                    //             symbol: 'none',
                    //             barWidth : 30,//柱图宽度
                    //             splitNumber : 10,
                    //             lineStyle: {
                    //                 color: 'green',
                    //                 width: 5
                    //             },
                    //             markLine: {
                    //                 symbol: ['none', 'none'],
                    //                 label: {show: false},
                    //                 data: [
                    //                     {xAxis: 1},
                    //                     {xAxis: 3},
                    //                     {xAxis: 5},
                    //                     {xAxis: 7}
                    //                 ]
                    //             },
                    //             areaStyle: {},
                    //             data: resp.price
                    //         }
                    //     ]
                    // };
                    myChart.setOption(option2);

                })


        }
    })
    //
    // layui.use('table', function () {
    //     var table = layui.table;
    //
    //     table.render({
    //         elem: '#test',
    //
    //         //todo 这边应该是要数据来源
    //         url: 'http://localhost:8080/furniture/user/get',
    //         cellMinWidth: 80 //全局定义常规单元格的最小宽度
    //         ,
    //         cols: [
    //             [{
    //                 field: 'userId',
    //                 width: 80,
    //                 title: 'ID',
    //                 sort: true
    //             }, {
    //                 field: 'username',
    //                 width: 80,
    //                 title: '用户名'
    //             }, {
    //                 field: 'sex',
    //                 width: 80,
    //                 title: '性别',
    //                 sort: true
    //             }, {
    //                 field: 'city',
    //                 width: 80,
    //                 title: '城市'
    //             }, {
    //                 field: 'sign',
    //                 title: '签名',
    //                 width: '30%',
    //                 minWidth: 100
    //             } //minWidth：局部定义当前单元格的最小宽度
    //                 , {
    //                 field: 'experience',
    //                 title: '积分',
    //                 sort: true
    //             }, {
    //                 field: 'score',
    //                 title: '评分',
    //                 sort: true
    //             }, {
    //                 field: 'classify',
    //                 title: '职业'
    //             }, {
    //                 field: 'wealth',
    //                 width: 137,
    //                 title: '财富',
    //                 sort: true
    //             }
    //             ]
    //         ]
    //     });
    // });
</script>
</body>

</html>